<template>
    <l-layout style="background: #f1f2f5;" :left="240" >
        <template #left >
            <l-panel title="query字段" style="padding:8px 0 0 0;" >
                <el-tree @check="handleQueryCheck"  default-expand-all show-checkbox ref="tree" node-key="id" :highlight-current="true"  :data="queryTree" >
                    <span class="lr-tree-node"  slot-scope="{ node }">
                        {{ node.label }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding:8px 0 0 4px;">
            <l-table
                :dataSource="config.table.querys"
                :columns="columns" 
                :isSortable="true"
                rowKey="id"
                :isShowNum="false"
                >
            </l-table >
        </l-panel>
    </l-layout>
</template>
<script>
export default {
    name:'webcode-query',
    inject: ["formConfig"],
    props:['queryTree'],
    components:{

    },
    computed:{
        config(){
            return this.formConfig;
        }
    },
    data(){
        return {
            columns: [
                {label:'query字段名',prop:'label',minWidth:'150'}
            ]
        };
    },
    methods:{
        handleQueryCheck($node,data){
            const addCols = data.checkedNodes.filter(t=>t.prop != undefined && this.config.table.querys.findIndex(t2=>t2.prop ==t.prop ) == -1)
            const removeCols = this.config.table.querys.filter(t=> data.checkedNodes.findIndex(t2=>t2.prop == t.prop) == -1)

            if(removeCols.length >0){
                this.config.table.querys = this.config.table.querys.filter(t=>removeCols.findIndex(t2=>t2.prop == t.prop) == -1)
            }
            
            if(addCols.length >0){
                this.config.table.querys.push(...addCols)
            }
            
        },
        setCheckedKeys(keys){
            this.$refs.tree.setCheckedKeys(keys)
        }
    }
}
</script>
